<template>
  <view class="preview">
    <swiper circular :current="currentIndex" @change="swiperChange">
      <swiper-item v-for="(item, index) in dataList" :key="item._id">
        <image
          v-if="readImgs.includes(index)"
          @click="maskChange"
          :src="item.picurl"
          mode="aspectFill"
        />
      </swiper-item>
    </swiper>

    <!-- 遮罩层 -->
    <view class="mask" v-if="maskState">
      <!-- 返回图标 -->
      <view
        @click="goBack"
        class="goBack"
        :style="{
          top: getStatusBarHeight() + 'px',
        }"
      >
        <uni-icons type="back" color="#fff" size="20" />
      </view>
      <!-- 数量 -->
      <view class="count"> {{ currentIndex + 1 }} / {{ dataList.length }}</view>
      <!-- 时间 -->
      <view class="time">
        <uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
      </view>
      <!-- 日期 -->
      <view class="date">
        <uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
      </view>
      <!-- 底部信息 -->
      <view class="footer">
        <view class="box" @click="clickInfo">
          <uni-icons type="info" size="23" />
          <view class="text">信息</view>
        </view>
        <view class="box" @click="clickScore">
          <uni-icons
            :type="currentInfo?.userScore ? 'star-filled' : 'star'"
            :color="currentInfo?.userScore ? '#FFCA3E' : ''"
            size="23"
          />
          <view class="text">{{ currentInfo?.score }}</view>
        </view>
        <view class="box" @click="clickDownload">
          <uni-icons type="download" color="" size="23" />
          <view class="text">下载</view>
        </view>
      </view>
    </view>

    <!-- 底部信息弹框 -->
    <uni-popup ref="infoPopup" type="bottom" :safe-area="false">
      <view class="infoPopup">
        <!-- 标题和关闭按钮 -->
        <view class="popHeader">
          <view></view>
          <view class="title">壁纸信息</view>
          <view class="close" @click="closeInfo">
            <uni-icons type="closeempty" color="#999" size="18" />
          </view>
        </view>
        <!-- 滚动条 -->
        <scroll-view scroll-y>
          <view class="content">
            <!-- 壁纸信息 -->
            <view class="row" v-for="(item, index) in menuList" :key="index">
              <view class="label">{{ item.name }}:&nbsp;&nbsp;</view>
              <view
                :class="[
                  'value',
                  item.name === '评分' ? 'routebox' : '',
                  item.name === '标签' ? 'tags' : '',
                  item.name === '分类' ? 'category' : '',
                ]"
              >
                <!-- 评分 -->

                <uni-rate
                  v-if="item.name === '评分'"
                  readonly
                  touchable
                  :value="currentInfo.score"
                  size="16"
                />

                <!-- 标签 -->
                <view
                  v-if="item.name === '标签'"
                  class="tab"
                  v-for="item in currentInfo.tabs"
                  :key="item"
                  >{{ item }}</view
                >

                <!-- 普通文本 -->
                <text v-else :class="[item.name === '评分' ? 'score' : '']">{{
                  currentInfo[item.text] || "暂无数据"
                }}</text>
              </view>
            </view>
            <!-- 版权信息 -->
            <view class="copyright">
              <text>Copyright © 2025-2026 壁纸</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 评分弹窗 -->
    <uni-popup ref="scorePopup" :is-mask-click="false">
      <view class="scorePopup">
        <!-- 标题和关闭按钮 -->
        <view class="popHeader">
          <view></view>
          <view class="title">{{
            isScore ? "已经评分过了~" : "壁纸评分"
          }}</view>
          <view class="close" @click="closeScore">
            <uni-icons type="closeempty" color="#999" size="18" />
          </view>
        </view>

        <!-- 评分 -->
        <view class="content">
          <uni-rate
            v-model="userScore"
            allowHalf
            :disabled="isScore"
            disabled-color="#FFCA3E"
          />
          <text class="text">{{ userScore }}分</text>
        </view>
        <!-- 底部按钮 -->
        <view class="footer" v-if="!isScore">
          <button @click="submitScore" :disabled="!userScore" size="mini" plain>
            确认评分
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onUnload, onShareAppMessage } from "@dcloudio/uni-app";
import { getStatusBarHeight } from "@/utils/system.js";
import { apiSendStar, apiWritePhoto, apiDetailWall } from "@/api/apis.js";
import { mitter } from "../../utils/bus";
const maskState = ref(true);
const userScore = ref(0);
const dataList = ref([]);
const currentId = ref();
const currentIndex = ref(0);
// 定义已读的图片
const readImgs = ref([]);
// 当前图片信息
const currentInfo = ref({});
// 判断是否已评分
const isScore = ref(false);

onLoad(async (e) => {
  currentId.value = e.id;
  if (e.type == "share") {
    const res = await apiDetailWall({ id: e.id });
    dataList.value = res.data.map((item) => {
      return {
        ...item,
        picurl: item.smallPicurl.replace("_small.webp", ".jpg"),
      };
    });
  }
  currentIndex.value = dataList.value.findIndex(
    (item) => item._id === currentId.value
  );
  // 存储已读的图片 并提前渲染前后
  readImgs.value.push(
    currentIndex.value == 0
      ? dataList.value.length - 1
      : currentIndex.value - 1,
    currentIndex.value,
    currentIndex.value == dataList.value.length - 1 ? 0 : currentIndex.value + 1
  );

  // 获取图片信息
  currentInfo.value = dataList.value[currentIndex.value];
});

// 壁纸滑动事件
const swiperChange = (e) => {
  currentIndex.value = e.detail.current;
  // if (currentIndex.value == dataList.value.length - 1) {
  //   mitter.emit("get-wallpaper");
  // }
  readImgs.value.push(
    currentIndex.value == 0
      ? dataList.value.length - 1
      : currentIndex.value - 1,
    currentIndex.value,
    currentIndex.value == dataList.value.length - 1 ? 0 : currentIndex.value + 1
  );

  // 获取图片信息
  currentInfo.value = dataList.value[currentIndex.value];
};

const menuList = [
  {
    name: "壁纸ID",
    id: 1,
    text: "classid",
  },
  {
    name: "分类",
    id: 2,
    text: "",
  },
  {
    name: "发布者",
    id: 3,
    text: "nickname",
  },
  {
    name: "评分",
    id: 4,
    text: "score",
  },
  {
    name: "摘要",
    id: 5,
    text: "description",
  },
  {
    name: "标签",
    text: "",
  },
];

const previewList = uni.getStorageSync("storeClassList") || [];
// 处理图片后缀 变为大图
dataList.value = previewList.map((item) => {
  return {
    ...item,
    picurl: item.smallPicurl.replace("_small.webp", ".jpg"),
  };
});

const maskChange = () => {
  maskState.value = !maskState.value;
};
const infoPopup = ref();
const scorePopup = ref();
// 点击info弹框
const clickInfo = () => {
  infoPopup.value.open();
};
// 关闭info弹框
const closeInfo = () => {
  infoPopup.value.close();
};
// 打开评分弹窗
const clickScore = () => {
  if (currentInfo.value.userScore) {
    isScore.value = true;
    userScore.value = currentInfo.value.userScore;
  }
  scorePopup.value.open();
};
// 关闭评分弹窗
const closeScore = () => {
  scorePopup.value.close();
  setTimeout(() => {
    isScore.value = false;
    userScore.value = 0;
  }, 300); // 延时时间略大于 popup 动画时长
};
// 提交评分回调
const submitScore = async () => {
  // 加载遮罩
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  const { classid, _id: wallId } = currentInfo.value;
  const res = await apiSendStar({
    classid,
    wallId,
    userScore: userScore.value,
  });
  uni.hideLoading();
  if (res.errCode == 0) {
    uni.showToast({
      title: "评分成功",
      icon: "success",
      mask: true,
    });
    dataList.value[currentIndex.value].userScore = userScore.value;
    uni.setStorageSync("storeClassList", dataList.value);
    closeScore();
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    success() {},
    fail() {
      uni.reLaunch({
        url: "/pages/index/index",
      });
    },
  });
};

// 点击下载回调
const clickDownload = async () => {
  // #ifdef H5
  uni.showModal({
    title: "",
    content: "长按保存壁纸",
    showCancel: false,
    success: ({ confirm, cancel }) => {},
  });
  // #endif

  // #ifndef H5
  try {
    uni.showLoading({
      title: "下载中...",
      mask: true,
    });
    const { classid, _id: wallId } = currentInfo.value;
    // 下载图片接口
    const res = await apiWritePhoto({
      classid,
      wallId,
    });
    if (res.errCode != 0) {
      throw res;
    }

    // 获取图片临时下载地址
    uni.getImageInfo({
      src: currentInfo.value.picurl,
      success: ({ width, height, path, orientation, type }) => {
        // 保存图片到相册
        uni.saveImageToPhotosAlbum({
          filePath: path,
          success: (result) => {
            uni.showToast({
              title: "保存成功",
            });
          },
          fail: (error) => {
            if (error.errMsg === "saveImageToPhotosAlbum:fail cancel") {
              uni.showToast({
                title: "保存失败,请重新点击下载",
                icon: "none",
              });
              return;
            }
            uni.showModal({
              title: "保存失败",
              content: "请检查是否开启相册权限",
              success: (result) => {
                // 再次弹窗开启授权
                if (result.confirm) {
                  uni.openSetting({
                    success: (result) => {
                      if (result.authSetting["scope.writePhotosAlbum"]) {
                        uni.showToast({
                          title: "授权成功",
                          icon: "success",
                        });
                      } else {
                        uni.showToast({
                          title: "授权失败",
                          icon: "error",
                        });
                      }
                    },
                  });
                }
              },
            });
          },
        });
      },
      fail: (error) => {
        console.log(error);
      },
      complete: () => {
        uni.hideLoading();
      },
    });
  } catch (error) {
    console.log(error);
    uni.hideLoading();
  }
  // #endif
};

// 分享
onShareAppMessage((e) => {
  return {
    title: `贝贝壁纸`,
    path: `/pages/preview/preview?id=${currentId.value}&type=share`,
  };
});

// // 离开页面的时候
// onUnload(() => {
//   // 清除缓存
//   uni.removeStorageSync("storeClassList");
// });
</script>

<style lang="scss" scoped>
.preview {
  width: 100%;
  height: 100vh;
  position: relative;

  swiper {
    width: 100%;
    height: 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }
  .mask {
    // 子元素
    & > view {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      color: #fff;
      width: fit-content;
    }
    .goBack {
      width: 38px;
      height: 38px;
      background-color: rgba(0, 0, 0, 0.5);
      left: 30rpx;
      margin-left: 0;
      border-radius: 100px;
      top: 0;
      backdrop-filter: blur(10rpx);
      border: 1rpx solid rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .count {
      top: 10vh;
      // 适配内容宽度
      background: rgba(0, 0, 0, 0.3);
      font-size: 28rpx;
      border-radius: 40rpx;
      padding: 8rpx 28rpx;
      backdrop-filter: blur(10rpx);
    }
    .time {
      font-size: 140rpx;
      top: calc(10vh + 80rpx);
      font-weight: 100;
      // 除去文字默认行高
      line-height: 1em;
      text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
    }
    .date {
      font-size: 34rpx;
      top: calc(10vh + 230rpx);
      text-shadow: 0 2rpx rgba(0, 0, 0, 0.3);
    }
    .footer {
      background: rgba(255, 255, 255, 0.8);
      bottom: 10vh;
      width: 65vw;
      height: 120rpx;
      border-radius: 120rpx;
      color: #000;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(20rpx);

      .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rpx 12rpx;
        .text {
          font-size: 26rpx;
          color: $text-color-2;
        }
      }
    }
  }

  .infoPopup {
    background: #fff;
    padding: 30rpx;
    border-radius: 30rpx 30rpx 0 0;
    overflow: hidden;

    .popHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        color: $text-color-2;
        font-size: 26rpx;
      }
      .close {
        padding: 6rpx;
      }
    }

    scroll-view {
      max-height: 60vh;

      .content {
        .row {
          display: flex;
          padding: 16rpx 0;
          font-size: 32rpx;
          line-height: 1.7em;

          .label {
            color: $text-color-3;
            width: 140rpx;
            text-align: right;
            font-size: 30rpx;
          }
          .value {
            flex: 1;
            width: 0;
          }
          .routebox {
            display: flex;
            align-items: center;

            .score {
              font-size: 26rpx;
              color: $text-color-2;
              padding-left: 10rpx;
            }
          }
          .tags {
            display: flex;
            flex: wrap;
            .tab {
              border: 1px solid $brand-theme-color;
              color: $brand-theme-color;
              font-size: 22rpx;
              padding: 10rpx 30rpx;
              border-radius: 40rpx;
              line-height: 1em;
              margin: 0 10rpx 10rpx 0;
            }
          }
          .category {
            color: $brand-theme-color;
          }
        }
        .copyright {
          font-size: 28rpx;
          padding: 20rpx;
          background: #f6f6f6;
          color: #666;
          border-radius: 10rpx;
          margin: 20rpx 0;
          line-height: 1.6rem;
        }
      }
    }
  }
  .scorePopup {
    background: #fff;
    padding: 30rpx;
    width: 70vw;
    border-radius: 30rpx;

    .popHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        color: $text-color-2;
        font-size: 26rpx;
      }
      .close {
        padding: 6rpx;
      }
    }

    .content {
      padding: 30rpx 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .text {
        color: #ffca3e;
        padding-left: 10rpx;
        width: 80rpx;
        line-height: 1em;
        text-align: right;
      }
    }
    .footer {
      padding: 10rpx 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
